<script setup lang="ts">
const props = defineProps({
  autoplay: {
    type: Boolean
  },
  muted: {
    type: Boolean
  },
  loop: {
    type: Boolean
  },
  channelId: {
    type: String
  },
  channelVideoId: {
    type: String
  },
  feedToken: {
    type: String,
    default: ''
  },
  ishorizontal: {
    type:Boolean,
    default:false
  },
  isvertical: {
    type:Boolean,
    default:false
  }
})

</script>

<template>
  <view class="item-container">

    <channel-video v-if="feedToken" :class="[ 'video',{ 'horizontal':ishorizontal }, {'vertical':isvertical } ]"
      :autoplay="autoplay" :muted="true" :loop="loop" :feed-token="feedToken">
    </channel-video>
    <channel-video v-else :class="[ 'video',{ 'horizontal':ishorizontal }, {'vertical':isvertical } ]" :autoplay="autoplay"
      :muted="true" :loop="loop" :finder-user-name="channelId" :feed-id="channelVideoId">
    </channel-video>

  </view>
</template>

<style scoped lang="scss">
.item-container {
  position: relative;
  border-radius: 20rpx;
  overflow: hidden;

  .info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 16rpx;
    font-size: 22rpx;
  }
}

.video {
  width: 100%;
}

.horizontal {
  height: 394rpx;
}

.vertical {

  height: 700rpx;
}
</style>
